<template>
  <div>
    <!-- 第一栏 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <span
          >【题型】：
          <span v-if="questionsDetail.questionType == '1'">单选</span>
          <span v-else-if="questionsDetail.questionType == '2'">多选</span>
          <span v-else>简答</span>
        </span>
      </el-col>
      <el-col :span="6">
        <span>【编号】：{{ questionsDetail.id }}</span>
      </el-col>
      <el-col :span="6">
        <span
          >【难度】：
          <span v-if="questionsDetail.difficulty == '1'">简单</span>
          <span v-else-if="questionsDetail.difficulty == '2'">一般</span>
          <span v-else>困难</span>
        </span>
      </el-col>
      <el-col :span="6">
        <span>【标签】：{{ questionsDetail.tags }}</span>
      </el-col>
    </el-row>
    <el-row class="tow-row" :gutter="20">
      <el-col :span="6">
        <span>【学科】：{{ subject.subject }}</span>
      </el-col>
      <el-col :span="6">
        <span>【目录】：{{ subject.catalog }}</span>
      </el-col>
      <el-col :span="6">
        <span>【方向】：{{ questionsDetail.direction }}</span>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- /第一栏 -->
    <!-- 第二栏 -->
    <p>【题干】：</p>
    <p>
      <span v-html="questionsDetail.question"></span>
    </p>
    <p>
      <span v-if="questionsDetail.questionType == 1"
        >单选题选项:（以下选中的选项为正确答案）</span
      >
      <span v-else-if="questionsDetail.questionType == 2"
        >多选题选项:（以下选中的选项为正确答案）</span
      >
      <span v-else></span>
    </p>
    <!-- 单选多选按钮 -->
    <div v-if="questionsDetail.questionType == 1">
      <el-radio
        v-for="item in questionsDetail.options"
        :key="item.id"
        v-model="isRight"
        :label="item.isRight"
        style="width: 100%; margin-top: 10px "
        >{{ item.code }}. {{ item.title }}</el-radio
      >
    </div>
    <!-- 多选 -->
    <div v-else-if="questionsDetail.questionType == 2">
      <el-checkbox-group :value="checkList">
        <el-checkbox
          v-for="item in questionsDetail.options"
          :key="item.id"
          :label="item.isRight"
          style="width: 100%; margin-top: 10px"
        >
          {{ item.code }}. {{ item.title }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-divider></el-divider>
    <!-- /第二栏 -->
    <!-- 第三栏 -->
    <div>
      <span
        >【参考答案】：
        <el-button type="danger" @click="openVideo">视频答案预览</el-button>
        <p>
          <video
            :src="questionsDetail.videoURL"
            v-if="videoFlag"
            controls="controls"
            style="background-color: rgb(0, 0, 0);
            width: 100%;
            height: 100%;
            display: block;"
          ></video>
        </p>
      </span>
    </div>
    <el-divider></el-divider>
    <!-- /第三栏 -->
    <!-- 第四栏 -->
    <span>【答案解析】： </span>
    <p v-html="questionsDetail.answer"></p>
    <el-divider></el-divider>
    <!-- /第四栏 -->
    <!-- 第五栏 -->
    <span>【题目备注】：</span>
    <p v-html="questionsDetail.remarks"></p>
    <!-- /第五栏 -->
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'

export default {
  name: 'ContainerSubject',
  data() {
    return {
      checkList: [1], // 复选框
      isRight: 1, // 单选框
      questionsDetail: {}, // 基础题库详情
      videoFlag: false // 控制视频得显示与隐藏
    }
  },
  components: {},
  props: {
    subject: {
      type: [Number, Object, String],
      required: true
    }
  },
  computed: {},
  watch: {},
  created() {
    console.log(this.subject)
    this.getQuestionDetail()
  },
  mounted() {},
  methods: {
    /* 获取题库详情 */
    async getQuestionDetail() {
      try {
        const { data } = await detail(this.subject)
        console.log(data)
        this.questionsDetail = data
      } catch (err) {
        console.log(err)
      }
    },
    /* 视频开关 */
    openVideo() {
      this.videoFlag = true
    }
  }
}
</script>

<style scoped lang="scss">
.tow-row {
  margin-top: 20px;
}
</style>
